<template>
  <div class="container">
    <!-- 头部目录名称 -->
    <el-form
      :inline="true"
      :model="formInline"
      class="demo-form-inline"
      size="small "
      ref="ppp"
    >
      <el-form-item label="目录名称">
        <el-input v-model="formInline.user"></el-input>
      </el-form-item>
      <el-form-item label="状态：">
        <el-select class="filter-item" style="width: 200px;" v-model="value">
          <el-option
            v-for="item in status"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button size="small" @click="cleaer">清除</el-button>
        <el-button type="primary" @click="getDirectorys()" size="small"
          >搜索</el-button
        >
      </el-form-item>
      <el-button
        style="margin-left: 180px;"
        v-if="subject.id && subject.name"
        type="text"
        icon="el-icon-back"
        @click="$router.back()"
        >返回学科</el-button
      >
      <el-button
        type="success"
        icon="el-icon-edit"
        class="fr"
        size="small"
        @click="dialogFormVisible = true"
        >新增目录</el-button
      >
    </el-form>
    <!-- 头部结束 -->
    <!-- 文字提示 -->
    <el-alert :title="alertText" type="info" show-icon> </el-alert>
    <!-- / 文字提示 -->
    <!-- 表格 -->
    <el-table :data="directorys" style="width: 100%;margin-top: 10px">
      <el-table-column type="index" label="序号" width="80"> </el-table-column>

      <el-table-column label="所属学科" width="180">
        <template slot-scope="scope">
          <span>{{ scope.row.subjectName }}</span>
        </template>
      </el-table-column>

      <el-table-column label="目录名称" width="170">
        <template slot-scope="scope">
          <span>{{ scope.row.directoryName }}</span>
        </template>
      </el-table-column>

      <el-table-column label="创建者" width="180">
        <template slot-scope="scope">
          <span>{{ scope.row.username }}</span>
        </template>
      </el-table-column>

      <el-table-column label="创建日期" width="170">
        <template slot-scope="scope">
          <span>{{ scope.row.addDate | parseTimeByString }}</span>
        </template>
      </el-table-column>

      <el-table-column label="面试题数量" width="180">
        <template slot-scope="scope">
          <span>{{ scope.row.totals }}</span>
        </template>
      </el-table-column>

      <el-table-column label="状态" width="170">
        <template slot-scope="scope">
          <span v-if="scope.row.state == 1">启用</span>
          <span v-else>禁用</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="qiehuan(scope.row)">
            {{ scope.row.state === 1 ? '禁用' : '启用' }}
          </el-button>
          <el-button
            type="text"
            :disabled="scope.row.state == 1"
            @click="openDialog(scope.row)"
          >
            修改
          </el-button>
          <el-button
            @click="deleteRow(scope.row.id)"
            type="text"
            :disabled="scope.row.state === 0 ? false : true"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- / 表格 -->
    <!-- 分页 -->
    <div class="pagination">
      <div class="pages">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="requestParameters.page"
          :total="total"
          :page-size="this.requestParameters.pagesize"
          :page-sizes="[5, 10, 20, 30]"
          layout="sizes, prev, pager, next, jumper"
        ></el-pagination>
      </div>
    </div>
    <!-- /分页 -->
    <!-- 新增目录 -->
    <el-dialog title="新增目录" :visible.sync="dialogFormVisible" width="30%">
      <el-form ref="form">
        <el-form-item label="所属学科">
          <el-select v-model="form.subjectID" placeholder="请选择" class="kuan">
            <el-option
              v-for="item in asd"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          prop="name"
          label="目录名称"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="form.directoryName"
            autocomplete="off"
            placeholder="请输入目录名称"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addDirectorys(form)">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 添加|修改 -->
    <tags-add
      ref="tagssAdd"
      :data="currTag"
      @updateList="updateList()"
    ></tags-add>
  </div>
</template>

<script>
import { list, add, remove, changeState } from '@/api/hmmm/directorys'
import { status } from '@/api/hmmm/constants'
import { simple } from '@/api/hmmm/subjects'
import TagsAdd from '../components/tags-add'
export default {
  components: { TagsAdd },
  data() {
    return {
      alertText: '',
      formInline: {
        user: '',
        region: ''
      },
      // 分页
      total: 0,
      requestParameters: {
        //  当前的页数
        page: 1,
        //  当前每页显示多少条数据
        pagesize: 10
      },
      //  学科列表
      directorys: [],
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }
      ],
      form: {
        directoryName: '',
        subjectID: '',
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      dialogFormVisible: false,
      formLabelWidth: '70px',
      value: null,
      //  接收status.value的值
      sta: '',
      asd: [], // 获取所有的科目
      currTag: {}
    }
  },

  watch: {
    $route: {
      handler(val, oldval) {
        this.getDirectorys(val.query.id || null)
      },

      // 深度观察监听
      deep: true,
      immediate: true
    }
  },
  filters: {
    qh(val) {
      if (val) return status.find(item => item.value === +val).label
    }
  },
  created() {
    //  this.getDirectorys()
    this.getsimple()
  },
  methods: {
    // onSubmit() {
    //   console.log('submit!');
    // },
    // 分页
    //  监听 pagesize 改变的事件
    handleSizeChange(newSize) {
      this.requestParameters.pagesize = newSize
      this.getDirectorys()
    },
    //  监听页码值改变
    handleCurrentChange(newPage) {
      this.requestParameters.page = newPage
      this.getDirectorys()
    },
    //  分页结束
    //  请求目录列表数据
    async getDirectorys(subjectID) {
      try {
        const { data } = await list({
          page: this.requestParameters.page,
          pagesize: this.requestParameters.pagesize,
          directoryName: this.formInline.user,
          state: this.value,
          subjectID
        })

        this.directorys = data.items
        this.total = data.counts
        this.alertText = `共 ${this.total} 条记录`
      } catch (err) {
        return this.$message.error('获取用户列表失败' + err)
      }
    },
    //  添加目录
    addDirectorys(form) {
      add(form)
        .then(res => {
          this.$message.success('成功')
          this.dialogFormVisible = false
          this.getDirectorys()
        })
        .catch(err => {
          console.log(err)
          this.$message.error('失败')
        })
    },
    // 删除
    deleteRow(id) {
      this.$confirm('此操作将永久删除该学科, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await remove({ id: id })
            .then(response => {
              this.$message.success('成功删除了用户' + '!')
              this.directorys.splice(id, 1)
              this.getDirectorys(this.requestParameters)
            })
            .catch(response => {
              this.$message.error('删除失败!')
            })
        })
        .catch(() => {
          this.$message.info('已取消操作!')
        })
    },
    // 切换
    async qiehuan(val) {
      // console.log(val)
      // let state = ''
      await changeState({
        id: val.id,
        state: val.state === 1 ? 0 : 1
      })
      this.$message.success('操作成功')
      val.state = val.state === 1 ? 0 : 1
    },
    // 修改
    openDialog(val = {}) {
      this.currTag = val
      this.$nextTick(() => {
        this.$refs.tagssAdd.open()
      })
    },
    // 新增|修改 后更新列表
    updateList() {
      if (!this.currTag.id) {
        this.requestParameters.page = 1
      }
      this.getsimple()
    },
    //  清除
    cleaer() {
      this.formInline.user = null
      this.value = null
      this.getDirectorys()
    },

    getsimple(res) {
      simple()
        .then(async res => {
          this.asd = res.data
        })
        .catch(err => {
          console.log(err)
          return this.$message.error('添加失败!')
        })
    }
  },

  computed: {
    status() {
      return status
    },
    subject() {
      return this.$route.query || {}
    }
  }
}
</script>
<style scoped lang="less">
el-button {
  border-radius: 3px;
}
.container {
  margin: 3px;
  padding: 20px;
  background-color: #fff;
  el-form-item {
    el-input {
      height: 32px;
    }
  }
  .fr {
    float: right;
  }
  .pagination {
    margin-left: 600px;
    padding-top: 10px;
  }
  .kuan {
    width: 275px;
    float: right;
  }
}
</style>
